<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <MmvTitle title="订单信息"></MmvTitle>
        </template>
        <el-form label-width="120px">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="订单编号:">{{shortBasic.orderNo}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户名称:">{{shortBasic.memberName}}</el-form-item>
            </el-col>
<!--            <el-col :span="8">
              <el-form-item label="预约取车时间:">{{shortBasic.rentalStartTime}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预约还车时间:">{{shortBasic.rentalEndTime}}</el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="预约租期:">{{shortBasic.leaseDays}}</el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="实际取车时间:">{{shortBasic.actualStartTime}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际还车时间:">{{shortBasic.actualEndTime}}</el-form-item>
            </el-col>
     <!--       <el-col :span="8">
              <el-form-item label="实际租期:">{{shortBasic.leaseDays}}</el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="违章押金:">{{shortBasic.deposit}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付类型:">{{shortBasic.depositPayType|depositPayType}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付方式:">{{shortBasic.depositPayWay|depositPayWay}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抵扣金额:"><strong>{{depositDeduct}}</strong></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="补缴金额:"><strong>{{payTheCostSum}}</strong></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应退金额:"><strong>{{depositRefund}}</strong></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item name="2"><template slot="title">
         <MmvTitle title="订单费用"></MmvTitle>
          </template>
         <el-table :data="detail.chargingItems"  border style="width: 100%; margin-top: 20px">
             <el-table-column _min-width="200" label="费用名称" align="center" prop="name" />
             <el-table-column _min-width="200" label="收费金额" align="center" prop="chargeMoney" />
             <el-table-column _min-width="160" label="支付方式" align="center" prop="payType">
                 <template slot-scope="{row}">
                     <dict-tag :options="dict.type.sys_pay_type" :value="row.payType" />
                 </template>
             </el-table-column>
             <el-table-column _min-width="160" label="支付状态" align="center" prop="payStatus">
                 <template slot-scope="{row}">
                     <dict-tag :options="dict.type.order_payStatus" :value="row.payStatus" />
                 </template>
             </el-table-column>
         </el-table>

      </el-collapse-item>
    </el-collapse>
    <MmvTitle title="违章扣款明细">
      <div slot="btn">
        <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['order:settlement:add']">新增</el-button> -->
      </div>
    </MmvTitle>


    <el-table v-loading="loading" :data="detail.settlementList" border show-summary :summary-method="getSummaries">
      <el-table-column label="违章单据号" align="center" prop="documentNo">
        <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>违章时间: {{ scope.row.illegalTime }}</p>
          <p>违章地点: {{ scope.row.illegalLocation }}</p>
          <p>违章内容: {{ scope.row.illegalDetail }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.documentNo }}</el-tag>
          </div>
        </el-popover>
      </template>
      </el-table-column>
      <el-table-column label="罚款" align="center" prop="illegalFines"/>
      <el-table-column label="扣分" align="center" prop="pointsDeduction"/>

      <el-table-column label="处理状态" align="center" prop="processingStatus">
        <template slot-scope="{row}">
                {{ {1:'未处理',2:'已处理未缴费',3:'已处理',4:'已缴费未处理'}[Number(row.processingStatus)] }}
            </template>
        </el-table-column>
      <el-table-column label="违章服务费" align="center" prop="deductions">
          <template slot-scope="{row}">
              <el-input placeholder="请输入" v-model="row.deductions" type="number"></el-input>
          </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-button @click="OverDepositSettlement" type="primary">完成结算</el-button>
        <el-button @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
  import {
    IllegalProcessing,
    OverIllegalDeposit
  } from '@/api/longOrder/index';
  import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
  export default {
    components: {
      MmvTitle
    },
    dicts: ['sys_pay_type', 'order_payStatus', 'charge_type'],
    props: ['orderNo'],
    filters: {
      depositPayType(val) {
        return {
          1: '线上',
          2: '线下',
          3: '微信支付分',
        } [Number(val)] || '--';
      },
      depositPayWay(val) {
        return {
          1: '微信',
          2: '支付宝',
          3: '信用卡',
          4: '现金',
          5: '微信支付分',
        } [Number(val)] || '--';
      },
    },
    data() {
      return {
        // orderNo: '13259c14b6f1483b9c1425e7413afad3',
        activeNames: ['1','2'],
        detail: {},
        shortBasic: {
          orderNo: '',
          deposit: ''
        },
        loading: true,
        btnLoadIng: false

      }
    },
    computed: {
      depositDeduct() {
        let sum=0;
        for(let item of this.detail.settlementList){
          sum+=Number(item.deductions);
        }
        return sum<=this.shortBasic.deposit?sum:this.shortBasic.deposit
      },
      payTheCostSum() {
        let sum=0;
        for(let item of this.detail.settlementList){
          sum+=Number(item.deductions);
        }
        return sum<=this.shortBasic.deposit?0:sum-this.shortBasic.deposit
      },

      depositRefund() {
        let sum=0;
        for(let item of this.detail.settlementList){
          sum+=Number(item.deductions);
        }
        return sum<=this.shortBasic.deposit?this.shortBasic.deposit-sum:0
      },
    },
    mounted() {
      this.doDepositRefundDetail();
    },
    methods: {
      doDepositRefundDetail() {
        IllegalProcessing(this.orderNo).then(response => {
          this.detail = response.data || {};
          this.shortBasic = response.data.shortBasic || {};
          this.loading = false
        });
      },
      /** 确认押金结算退款 */
      OverDepositSettlement() {
        this.$modal.confirm('提交后将不可编辑,请确认是否已完成押金退款或收取补缴费用？').then(() => {
          let data={
            orderNo:this.orderNo,
            carIllegalList:this.detail.settlementList
          }
          OverIllegalDeposit(data).then(response => {
            this.$message.success(response.msg)
             this.close()
          });

        })
      },
      close(){
        this.$emit('close');
      },
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index !=3) {
            const values = data.map(item => Number(item[column.property]));
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            if(index==2){
              sums[index] += ' 分';
            }else{
              sums[index] += ' 元';
            }

          }
        });

        return sums;
      },
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        let rowspan = this.detail.chargingItems.length - 2;
        if (columnIndex === 0 || columnIndex > 5) {
          if (rowIndex === 0 && rowIndex < rowspan) {
            return {
              rowspan: rowspan,
              colspan: 1
            };
          } else if (rowIndex > 0 && rowIndex < rowspan) {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }

        if (columnIndex > 5 && rowIndex >= rowspan) {
          if (rowIndex === rowspan) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
        if (rowIndex >= rowspan) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          } else if (columnIndex === 5) {
            return [1, 4];
          } else if (columnIndex < 5) {
            return [0, 0];
          }
        }
      }
    },

  }
</script>

<style scoped="scoped">
  .mmv-title {
   margin: 0 !important;
   border-bottom: none !important;
  }
  .el-form-item {
      margin-bottom: 5px !important;
  }

  .el-table--medium .el-table__cell {
      padding: 3px !important;
  }

  .footer{
        text-align: end;
        padding-top: 20px;
  }
</style>
